// 表单提交验证

// 第一步：表单提交统一验证，利用添加按钮点击事件：(方法一)
    let checkBox = document.querySelector('form .checkbox');
    let button = document.querySelector('form .button');
    // 事件一：提交按钮上的点击事件
    // 方法一：这种写法return的返回值无法传给事件本身
    // button.addEventListener('click',function(){
    //     if (!acountExp.test(inputBoxs[0].value))return false;
    //     if (!telExp.test(inputBoxs[1].value))return false;
    //     if (!msgExp.test(inputBoxs[2].value))return false;
    //     if (!pwdExp.test(inputBoxs[3].value))return false;
    //     if (!checkBox.checked)return false;
    // })
    button.onclick = function(){
        // 用调用函数的方法，这样会执行函数的功能
        // if (!commonCheckbox(acountExp , inputBoxs[0] , tips[0]))return false;
        // if (!commonCheckbox(telExp , inputBoxs[1] , tips[1]))return false;
        // if (!commonCheckbox(msgExp , inputBoxs[2] , tips[2]))return false;
        // if (!commonCheckbox(pwdExp , inputBoxs[3] , tips[3]))return false;
        // 直接判断，不需要调用函数的功能 和上面的需求不一样
        if (!acountExp.test(inputBoxs[0].value))return false;
        if (!telExp.test(inputBoxs[1].value))return false;
        if (!msgExp.test(inputBoxs[2].value))return false;
        if (!pwdExp.test(inputBoxs[3].value))return false;
        if (!checkBox.checked)return false;
    };


// 第二步：验证每个输入框
    // 用户名正则表达式，只包含数字和字母，必须字母开头，6-12位之间
    let acountExp = /^[a-zA-Z]\d{5,11}$/;
    // 手机号正则表达式
    let telExp = /^1[3-9][\d]{9}$/;
    // 短信验证码的正则表达式
    let msgExp = /^[0-9]{4}$/;
    // 密码正则表达式
    let pwdExp = /^.{6,12}$/;
    // 将输入框的判断封装为函数
    function commonCheckbox(Exp , dom , tip){
        if (!Exp.test(dom.value)) {
            tip.style.display = 'inline-block';
            return false;
        }else{
            tip.style.display = 'none';
            return true;
        };
    };
    // 事件二：每个输入框的离焦事件；
    let inputBoxs = document.querySelectorAll('form .input-box input');
    let tips = document.querySelectorAll('form .input-box .tips');
    inputBoxs.forEach(function(v,i){
        v.addEventListener('blur',function(){
            if (i === 0) {
                commonCheckbox(acountExp , inputBoxs[0] , tips[0]);
            };
            if (i === 1) {
                commonCheckbox(telExp , inputBoxs[1] , tips[1]);
            };
            if (i === 2) {
                commonCheckbox(msgExp , inputBoxs[2] , tips[2]);
            };
            if (i === 3) {
                commonCheckbox(pwdExp , inputBoxs[3] , tips[3]);
            };
        });
    });


// 第三步：输入框输入内容，后面的小❌号出现
    let clears = document.querySelectorAll('form .input-box strong');
    // 事件三：每个输入框上面添加input事件；输入内容，让小叉号显示
    inputBoxs.forEach(function(v,i){
        v.addEventListener('input',function(){
            clears[i].style.display = 'block';
            if (v.value === '') {
                clears[i].style.display = 'none';
            };
        });
    });
    // 事件四：小叉号上面的点击事件；点击小叉号，清除输入框内容,同时让小叉号隐藏
    clears.forEach(function(v,i){
        v.addEventListener('click',function(){
            inputBoxs[i].value = '';
            v.style.display = 'none'
        });
    });


// 第四步：获取验证码倒计时
    let btn = document.querySelector('form .input-box .btn');
    // 事件五：给手机号输入框添加input事件
    inputBoxs[1].addEventListener('input',function(){
        if (telExp.test(inputBoxs[1].value)) {
            btn.style.backgroundColor = '#0af';
            btn.style.color = '#fff';
        }else{
            btn.style.backgroundColor = '#ddd';
        }
    });
    // 事件六：验证码按钮点击事件：点击后开始倒计时
    btn.addEventListener('click',function(){
        if (!telExp.test(inputBoxs[1].value)) {
            tips[1].style.display = 'inline-block';
            return;
        }  
        let n = 59;
        let timer = setInterval(function(){
            console.log(this);
            btn.diabled = true;
            btn.style.opacity = '0.5';
            btn.textContent = '重新发送：'+ n +'s';
            n--;
            if (n<0) {
                clearInterval(timer);
                btn.textContent = '重新获取';
                btn.diabled = false;
                btn.style.opacity = '1';
            }
        },1000)  
    });


// 第五步：设置密码输入框是否可见
    let eye = document.querySelector('.input-box .eye')
    // 事件七：密码框输入框输入事件，
    inputBoxs[3].addEventListener('input',function(){
        if (inputBoxs[3].value !== '') {
            eye.style.display = 'block';
        }else{
            eye.style.display = 'none';
        }
    });
    eye.addEventListener('click',function(){
        if (inputBoxs[3].type === 'password') {
            eye.src = './images/eyes-open.png';
            inputBoxs[3].type = 'text'
        }else{
            eye.src = './images/eyes-close.png';
            inputBoxs[3].type = 'password';
        }
      
    });

// 第六步：提价按钮被激活的效果
    // 将判断button变蓝的条件封装为一个函数
    function buttonActive(){
        if (
            acountExp.test(inputBoxs[0].value)&&
            telExp.test(inputBoxs[1].value)&&
            msgExp.test(inputBoxs[2].value)&&
            pwdExp.test(inputBoxs[3].value)&&
            checkBox.checked
            ) {
                button.style.backgroundColor = '#0af';
                button.style.color = '#fff' ;
        }else{
            button.style.backgroundColor = '#ddd';
            button.style.color = '#333' ;
        }
    }
    // 事件八：输入框输入调用button激活样式函数
    inputBoxs.forEach(function(v,i){
        v.addEventListener('input',function(){
            buttonActive();
        })
    });
    // 事件九：checkbox点击时调用button激活样式函数
    checkBox.addEventListener('click',function(){
        buttonActive();
    });

// 第一步表单验证方法二：表单提交统一验证，利用表单的提交事件（以后不常用）

// 1.获取form标签是为了给表单添加提交事件
// let form = document.querySelector('form');

// 2.给表单添加提交事件，返回false，则不提交，返回true则提交，默认返回的是true；
// form.onsubmit = function(){
    // let tips = document.querySelectorAll('form .input-box .tips')

    // 3.设置表单提交的条件
    // 3.1（第一种方式，不建议） 调用之前的判断函数,每个函数都得执行，且执行函数的功能
    // first = commonCheckbox(acountExp , inputBoxs[0] , tips[0]);
    // second = commonCheckbox(telExp , inputBoxs[1] , tips[1]);
    // third = commonCheckbox(msgExp , inputBoxs[2] , tips[2]);
    // fourth = commonCheckbox(pwdExp , inputBoxs[3] , tips[3]);
    // fifth = checkBox.checked;

    // 如果每个条件都满足，则不执行flag = false；那么最终返回的flag是true
    // if (!first||!second||!third||!fourth||!fifth) {
    //     return false;
    // }

    // 3.2（第二种方式，推荐）进行逐项判断，如果前面条件成立，后面的判断不用再执行,且这里没有调用函数，即不执行函数的功能
    // 注意：这里的这种写法比较特殊，if条件后面如果只有一个语句，那么这个语句可以不用大括号包裹，他和前面的if也是一个整体
    // if (!acountExp.test(inputBoxs[0].value))return false;
    // if (!telExp.test(inputBoxs[1].value))return false;
    // if (!msgExp.test(inputBoxs[2].value))return false;
    // if (!pwdExp.test(inputBoxs[3].value))return false;
    // if (!checkBox.checked)return false;

    // 3.3（第三种方式判断）和上面表达的意思一样，写法更常规一些，但这里的判断条件本身是调用函数，因此会执行函数的功能
    // let flag = true;
    // if (!commonCheckbox(acountExp , inputBoxs[0] , tips[0])) {
    //     flag = false;
    // }else if (commonCheckbox(telExp , inputBoxs[1] , tips[1])) {
    //     flag = false;
    // }else if (commonCheckbox(msgExp , inputBoxs[2] , tips[2])){
    //     flag = false;
    // }else if (commonCheckbox(pwdExp , inputBoxs[3] , tips[3])){
    //     flag = false;
    // }
    // return flag;
// };    




